/**
 * Created by weirong on 2017/12/7.
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    ImageBackground,
    TouchableOpacity,
} from 'react-native';
import {InputItem} from 'antd-mobile'

export default class index extends React.Component{
    render() {
        const { userName, pwd, change, login, loading } = this.props
        return (
            <View style={styles.container}>
                <ImageBackground source={require('../../assets/imgs/mybackgroundimage.jpg')}
                                 style={{width: '100%', height: '100%'}}>
                    <View style={{flex:1,flexDirection: 'row', justifyContent:'center', alignItems: 'center',paddingRight:'5%'}}>

                        <View style={{flex:1,flexDirection:'column'}}>
                            <Text style={styles.titleLayout}>
                                现场监督
                            </Text>
                            <Text style={styles.titleLayout}>
                                PDA系统
                            </Text>
                        </View>
                        <View style={styles.backgroundView} >
                            <View>
                                <TextInput
                                    underlineColorAndroid='transparent'
                                    placeholder='请输入账号'
                                    maxLength={20}
                                    onChangeText={(val) =>change({userName:val})}
                                    value={userName}
                                />
                                <TextInput
                                    underlineColorAndroid='transparent'
                                    placeholder='请输入登录密码'
                                    maxLength={18}
                                    onChangeText={(val) =>change({pwd:val})}
                                    value={pwd}
                                />
                                <TouchableOpacity onPress={login}>
                                    <View style={styles.loginButton}>
                                        <Text style={styles.loginTitle}>
                                            {
                                                loading?'登录中...':'登录'
                                            }
                                        </Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>

                    </View>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'rgb(206,206,206)',
    },
    //背景
    backgroundView:{
        width: '50%',
        backgroundColor: 'rgba(0,0,0,0.1)',
        borderRadius:5,
        paddingTop: 30,
        paddingBottom: 30,
        paddingLeft: 40,
        paddingRight: 40,
    },
    titleLayout:{
        textAlign:'center',
        color:'white',
        fontSize: 30,
    },
    loginButton:{
        backgroundColor:'#fe9300',
        marginTop: 30,
        borderRadius: 3,
        borderColor:'rgba(0,0,0,0)',
    },
    //"登录"title
    loginTitle: {
        color: 'white',
        fontSize: 24,
        fontWeight: 'bold',
        padding: 10,
        textAlign: 'center',
    },
});
